What are floats?
This box is floated right.
A float is simply a box (for example, a div
) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.
One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.
Floats are a bit like the align="left"
and align="right"
attributes in img
elements.
The float
property
Creating a floated element in CSS is very easy. We just use the float
property – for example:
<div style="float: left; width: 100px;">
A left-floated div
</div>
<div style="float: right; width: 100px;">
A right-floated div
</div>
Or, using IDs and a separate style sheet:
<div id="leftFloat">A left-floated div</div>
<div id="rightFloat">A right-floated div</div>
.
.
.
#leftFloat
{
float: left;
width: 100px;
}
#rightFloat
{
float: right;
width: 100px;
}
Some examples of floats
Here are a few simple examples that illustrate the properties of floats, and show some of the things you can do with them.
A left-floated boxout
Here we have a regular (non-floated) column of text, with a left-floated box on the left that the regular text wraps around.
<div style="float: left; width: 100px;
margin: 5px; padding: 5px; border: 1px solid black;">
<p>This is our left-floated text box.</p>
</div>
<p>
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
</p>
This is what it looks like:
This is our left-floated text box.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
A right-floated boxout
This is similar to the last example, but this time the box is floated right rather than left.
<div style="float: right; width: 100px;
margin: 5px; padding: 5px; border: 1px solid black;">
<p>This is our right-floated text box.</p>
</div>
<p>
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
</p>
This is what it looks like:
This is our right-floated text box.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
Two columns of text
In this example, we use two floats side-by-side to create two columns of text. We use two left-floated div
s to do this (not a left float and a right float as you might expect). The second floated div sits to the right of the first floated div.
<div style="float: left; width: 200px; margin-right: 5px;">
<p>
This is our left text column.
This is our left text column.
This is our left text column.
</p>
</div>
<div style="float: left; width: 200px; margin-right: 5px;">
<p>
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
</p>
</div>
<div style="clear: both;"> </div>
This is what it looks like:
This is our left text column.
This is our left text column.
This is our left text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
The clear
property
You’re probably wondering what this is for:
<div style="clear: both;"> </div>
The clear
property is a way of saying “make sure this element does not run alongside a previous float”. By putting a div
with clear: both
after our floated columns, we’re saying “don’t run this div
, or anything after it, alongside our floated columns”.
Without having an element with clear: both
after our floated columns, all later content on the page would attempt to flow alongside the columns. (Try it yourself and see what happens!) You could say that we’re telling the browser, “the floats end here”.
Possible values for the clear
property are: left
(don’t run alongside any left-floated boxes), right
(don’t run alongside any right-floated boxes), both
(don’t run alongside any left- or right-floated boxes), and none
(do nothing). When in doubt, use both
.
Rules to remember
- If you want to have a right-floated box, you need to put the HTML for the floated box before the non-floated content (not after as you might expect).
- In the original CSS version 2 spec you had to specify a
width
for all floated elements (though the width could be relative, such as a percentage width). In the new CSS2 spec, however, an explicit width is not required. - If you need to have content after a float that shouldn’t run alongside the float, use the
clear
property.
Go forth and float!
Now that you understand how floats work, try making a few floated boxes yourself, remembering the above rules. Floats are a key part of building CSS layouts, so they’re well worth getting the hang of. You might also like to refer to the official specification of the ‘float’ property.
mcdrummerman says
Thanks for this. It was helpful for a beginner.
[Edited by mcdrummerman on 12-Apr-10 20:13]
matt says
@mcdrummerman: Thanks for the feedback – I’m glad you found the article helpful. π
yob says
I’ve been using tables for years because I never really grasped the concept of floating divs until I read this article. How simple it can be … thanks for sharing!
matt says
Thanks yob. I’m happy the article helped you out!
trebor says
Hi Matt
I have been trying to get my head around CSS v Tables for several months and I have to say the article has helped, however the problem I have is trying to emulate a table.
I have been asked by a local charity to build a basic site I could do it within 1/2 an hour using a table but I have spent three days trying to get this to work in CSS almost to the point of abandoning the CSS route and just putting in a table.
It’s not so much the float it’s getting the content how they want it, is there anyway I could upload the image and seek your advice I am looking for how to do not for you to do.
trebor
matt says
@trebor: Sure no problem, although we don’t have an image upload facility on this site. How about uploading to http://imageshack.us/ then posting the URL here?
trebor says
Hi Matt
This is due to go live on August the 5th the table one looks okay to them but I know is unprofessional looking, so if you can have a look and point me in the right direction.
The site is already on a server so I have set up a mock site here is the link http://www.helpinghands-childcare.co.uk/mockSite/index.php
Thanks
trebor
matt says
@trebor: I didn’t understand the bit about the logo and top bar matching up / staying along side. However it sounds like you want your left and right columns to stay the same height as each other, yes? This is known as faux columns, and is easy to do using a simple repeating background image. Here are some good tutorials on this topic:
http://www.alistapart.com/articles/fauxcolumns/
http://www.communitymx.com/content/article.cfm?cid=afc58
In this case all you need is a 2-pixel-wide image in your dark blue colour that you set as a repeating background image on the container that contains your 2 floated column divs. The container (and background) will then stretch to the height of the tallest column within the container.
Make sense? π
trebor says
Matt
Okay I will try again
Left column has the logo at the top and navigation below it
Contents / right column has first div Info goes here (Top Info bar) needs to be flexible and immediately below this is the colored band.
The problem I have is getting both the top info bar and the colored bar to sit on top of each other and both along side the logo.
Hope this clearer.
trebor
matt says
@trebor: Float the logo div left, and create another right-floated div containing both the info bar and color bar.
Not sure what you mean by “flexible” but if you want the layout to be fluid (stretches horizontally to match the width of the browser) then you can specify percentage widths instead of pixel widths for your floated divs.
Does that help?
trebor says
Hi Matt
Well after a few painstaking hours and a few more grey hairs I think I have cracked it.
http://www.helpinghands-childcare.co.uk/mockSite/test.html
Dreamweaver CS3 does not like the layout throws it all over the place but when viewed in IE looks good Fire Fox puts the color bar a fraction out of line but apart from that fine.
I await your comments
Thanks Again
Trebor
matt says
@trebor: Glad you got it working. π I wouldn’t worry about it not looking right in Dreamweaver – it wouldn’t be the first time. π
vCopia says
Matt,
I had to post and tell you how much I appreciate your taking the time to share a “how to” on floating side by side columns. I spent days searching the web, posting on forums, talking to experienced coding colleagues and no one could sufficiently respond. My coding challenge required I stretched your tutorial one step further, in that I wanted non-floating text to wrap around any white space left beside these two floating columns, on what would become a reusable template page for our blog, and the clarity of your descriptions assisted in me in doing just that.
So, again, thanks. You’ve helped us add a bit of smooth sophistication to our site.
[Edited by vCopia on 02-Apr-11 11:31]
matt says
vCopia: Thanks very much for your kind words and feedback – much appreciated. π
mincuu says
thanks guys..